﻿<html> 

<head> 
<link rel="stylesheet" type="text/css" href="editor/editor.css"/>
<script type="text/javascript" src="editor/jscolor.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript">

size = 3;//default size
clicked = false;

function Init() 

{ 
document.getElementById('iView').designMode = 'On';
document.getElementById('iView').contentEditable = "True";
}



function bold() { 
document.execCommand('bold', false, null); 
}

  function italic(){
    document.execCommand('italic',false,null);
  }

    function underline(){
     document.execCommand('underline',false,null);
    }

        function center(){
            document.execCommand('justifycenter',false,null);
        }

            function left(){
                document.execCommand('justifyleft',false,null);
            }

                function right(){
                    document.execCommand('justifyright',false,null);
                }
                  function insertImage(path){
                     document.getElementById('iView').focus();
                    document.execCommand('InsertImage',false,path);
                  }
                    function insertLink(url){
                        document.getElementById('iView').focus();
                    document.execCommand('CreateLink',false,url);
                    }
                                       
                   function undo(){
                    document.execCommand('Undo',false,null);
                   }
                      function redo(){
                    document.execCommand('Redo',false,null);
                   }
                      function unlink(){
                        document.execCommand('Unlink',false,null);
                      }
                        function setColorS(colorS){
                            document.getElementById('iView').focus();
                            document.execCommand('ForeColor',false,colorS);
                                                    
                        }
                     function truer(){
                        clicked=true;
                     }
                     function falser(){
                        clicked=false;
                     }
                    function changeFontSize(direction)
                     {
                        
                        
                        if(direction=="+"&&size<7)
                         size++;
                        if(direction == "-"&&size>1)
                         size--; 
                        document.getElementById('iView').focus();
                        document.execCommand('FontSize',false,size);
                        document.getElementById('size').value = size;
                         
                     }

</script>

<body onLoad="Init()"> 
<div class="editor">
<div id="panel">
<input class="panel1" type="button" onClick="undo()" title="Отменить"  value='Отменить' /> 
<input class="panel1" type="button" onClick="redo()" title="Повторить"  value='Повторить' />

<input class="panel1" type="button" onClick="bold()" title="Жирный шрифт" value="B" /> 
<input class="panel1" type="button" onClick="italic()" title="Курсив"  value='Italic' /> 
<input class="panel1" type="button" onClick="underline()" title="Подчеркнуть" value='U' /> 

<input class="panel1" type="button" onClick="left()" title="Выровнить по левому краю" value='«' /> 
<input class="panel1" type="button" onClick="center()" title="Выровнить по центру" value='»«' /> 
<input class="panel1" type="button" onClick="right()" title="Выровнить по правому краю" value='»' /> 

<input class="panel1" type="button" onClick="document.getElementById('imageMenu').style.visibility='visible'" title="Вставить изображение"  value='Изображение' /> 

<input class="panel1" type="button" onClick="document.getElementById('linkMenu').style.visibility='visible'" title="Создать ссылку"  value='Ссылка' />  
<input class="panel1" type="button" onClick="unlink()" title="Unlink"  value="Unlink" /> 
<input id="colorButton" class="panel1" type="button" onclick="if(!clicked){document.getElementById('colorSelect').style.visibility='visible'; document.getElementById('colorPicker').style.visibility='visible';setTimeout(truer,5);} if(clicked) {document.getElementById('colorPicker').style.visibility='hidden'; document.getElementById('colorSelect').style.visibility='hidden';setTimeout(falser,5);setColorS(document.getElementById('colorPicker').value);} " title="Выбрать цвет" value="Цвет" />


</div>

<div class="bar" id="imageMenu">Введите путь к изображению:<br />
<input  type="text" id="imageUrl" /><br />
<input class="panel1" align="center" type="button" value="Вставить" onclick="insertImage(document.getElementById('imageUrl').value);document.getElementById('imageMenu').style.visibility='hidden'" />
<input class="panel1" type="button" value="Отмена" onclick="document.getElementById('imageMenu').style.visibility='hidden';document.getElementById('url').value=''" />
</div>

<div class="bar" id="linkMenu">Введите ссылку:<br />
<input type="text" id="url" /><br />
<input class="panel1" type="button" value="Вставить" onclick="if(document.getElementById('url').value!='')insertLink(document.getElementById('url').value);document.getElementById('linkMenu').style.visibility='hidden'" />
<input class="panel1" type="button" value="Отмена" onclick="document.getElementById('linkMenu').style.visibility='hidden';document.getElementById('url').value=''" />
</div>

<div class="colorPickerBar"  id="colorSelect">              
<input  id="colorPicker" class="color" ondblclick=" document.getElementById('iView').focus();"  />  <br />                                  
<input class="panel1" type="button" value="Применить" onclick="setColorS(document.getElementById('colorPicker').value);document.getElementById('colorSelect').style.visibility='hidden';"/> 
</div>

<input class="panel1" type="button" onclick="changeFontSize('+')" value="+"/>
<input  id="size" type="text" value="3" disabled="true" style = "width:15px">
<input class="panel1" type="button" onclick="changeFontSize('-')" value="-"/>
</div>
<br/>

<div id="iView" ></div>


</body> 

</html>